<template>
  <div class="news">
    <div class="news-1">

      <a-list :data-source="listData" :pagination="pagination" item-layout="vertical" size="small">
        <template #footer>
          <div style="width: 80%; padding-left: 10px;">
            <b>希望您在职场中找到属于自己的位置，实现人生价值！</b>
            祝您工作顺利，生活美满，前程似锦！
          </div>
        </template>
        <template #renderItem="{ item }">

          <a-list-item key="item.title" class="list-item">
            <template #extra>
              <div style="display: flex">


              <div v-show="item.interviewJobId!=null" style=" display: flex;margin-right: 50px">

                <div style="display: flex; align-items: center;flex-direction: column">
                  <h3 style="float: right;margin-right: 80px;width: 150px;color: red"> 薪资:{{ item.jobSalary }} </h3>
                  <div style="display: flex; justify-content:space-around; width: 200px">

                    <h4>{{ item.jobCompanyName }}</h4>
                    <h4>{{ item.jobCompanySize }}</h4>
                  </div>


                </div>
                <div style="width: 150px">
                  {{ item.jobMajorRequirement }} &nbsp;&nbsp;
                  {{ item.jobEducationRequirement }} &nbsp;&nbsp;
                </div>
              </div>
              <div>
                <div>
                  <a-popconfirm title="你确定删除这条记录吗，删除后不可恢复？"
                                ok-text="确认"
                                cancel-text="取消"
                                @confirm="deleteInterview(item.interviewId, item.interviewEnterpriseId)">
                    <template #icon>
                      <question-circle-outlined style="color: red"/>
                    </template>
                    <a-button danger ghost type="primary">删除</a-button>
                  </a-popconfirm>
                </div>
              </div>
              </div>
            </template>

            <a-list-item-meta>
              <template #title>
                <div style="display: flex;align-items: center">
                  <div v-show="item.interviewJobId!=null" style="margin-right: 20px">
                    {{ item.jobTitle }}
                  </div>
                  <div style="color: green">
                    时间 : {{ formatInterviewDate(item.interviewData) }}&nbsp;&nbsp; / &nbsp;&nbsp;
                  </div>
                  <div style="color: red;">
                    面试状态 : {{ item.interviewStatus }}
                  </div>
                  <div style="margin-left: 20px;padding: 5px;border-radius: 10px">
                    <router-link :to="{path:'/enterprise/interview/info/'+item.interviewId}"
                                 style="color: #1677FF;font-size: 15px">查看详情
                    </router-link>
                  </div>
                  <br>
                </div>
                <div style="margin-bottom: 5px">
                  面试连接: <a :href="item.interviewUrl">{{ item.interviewUrl }}</a>
                </div>
                <div v-show="item.interviewDesc!=null">
                  备注:{{ item.interviewDesc }}
                </div>


              </template>
              <template #avatar>
                <a-avatar v-show="item.interviewJobId!=null"
                          :src="'http://localhost:8080/file/download?name='+item.jobCompanyLogo"
                          style="width: 70px; height: 70px;"/>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>

    </div>
  </div>
</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import {pageJobAPI} from "@/apis/job.js";
import http from "@/utils/http.js";
import {pageCollectAPI} from "@/apis/collect.js";
import {useUserStore} from "@/stores/user.js";
import {queryResumeByStudentUserIdAPI} from "@/apis/student.js";
import {deleteInterviewByEnterpriseAPI, pageInterviewAPI, pageInterviewByEnterpriseIdAPI} from "@/apis/interview.js";
import {queryInformationByUserIdAPI} from "@/apis/enterprise.js";
import {QuestionCircleOutlined} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";


//获取数据
//获取数据
const useStore = useUserStore();
const enterpriseUserId = ref(useStore.userInfo.userId);
const listData = ref([]);
const data = ref({pageCurrent: 1, pageSize: 5, interviewEnterpriseId: ''});
const getData = async (data) => {
  const res1 = await queryInformationByUserIdAPI(enterpriseUserId.value)
  data.interviewEnterpriseId = res1.data.data.enterpriseId;
  const res = await pageInterviewByEnterpriseIdAPI(data)
  pagination.total = res.data.data.total
  listData.value = res.data.data.data
}

const pagination = {
  onChange: page => {
    console.log(page);
    data.value.pageCurrent = page
    getData(data.value)
  },
  pageSize: 5,
  total: 0,
};
// 生命周期
onMounted(() => {
  getData(data.value);
});
//时间格式处理
const formatInterviewDate = (dateString) => {
  const date = new Date(dateString);

  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

//企业删除面试记录
const deleteInterview = async (interviewId, interviewEnterpriseId) => {
  const res = await deleteInterviewByEnterpriseAPI(interviewId, interviewEnterpriseId)
  if (res.data.flag) {
    message.success('删除成功');
    await getData(data.value);
  }
}



</script>
<style scoped>
.news {

  width: 100%;
  display: flex;
  justify-content: center;

  .news-1 {
    width: 90%;


    .list-item {
      margin: 10px 10px 0;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
      border-radius: 10px; /* 你可以调整这个值来改变圆角的大小 */

      h4 {
        background-color: #F5F5F5;
        padding: 9px;
        border-radius: 5px;
      }
    }
  }
}
</style>